<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <input id="id" name="id" th:value="${productArticle.id}" type="hidden">
                        <input id="productid" name="productid" th:value="${productArticle.productid}" type="hidden">
                        <input id="tagidhidden" name="tagidhidden" th:value="${productArticle.tagid}" type="hidden">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">文章标题：</label>
                            <div class="col-sm-8">
                                <input maxlength="30" id="articletitle" name="articletitle"
                                       th:value="${productArticle.articletitle}"
                                       class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">文章日期：</label>
                            <div class="col-sm-8">
                                <input aria-required="true" autocomplete="off" maxlength="10"
                                       required="required" id="articlehistorydate" name="articlehistorydate"
                                       class="form-control"
                                       th:value="${productArticle.articlehistorydate}" type="text">
                            </div>
                            <!-- <div class="col-sm-8">
                                 <input readonly="readonly" id="articlehistorydate" name="articlehistorydate"
                                        th:value="${productArticle.articlehistorydate}" class="form-control" type="text">
                             </div>-->
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">产品名称：</label>
                            <div class="col-sm-8">
                                <input readonly="readonly" id="productname" name="productname"
                                       th:value="${productArticle.productname}"
                                       class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">标签名称：</label>
                            <div class="col-sm-8">
                                <select id="tagid" name="tagid"
                                        class="form-control" type="text">
                                </select>
                            </div>
                        </div>
                        <input id="fileName" name="fileName" class="form-control" type="hidden">
                        <input id="articlecoverurl" th:value="${productArticle.articlecoverurl}" name="articlecoverurl"
                               class="form-control" type="hidden">
                        <div class="form-group">
                            <form enctype="multipart/form-data"
                                  method="post" id="updform">
                                <label class="col-sm-3 control-label">文章封面</label>
                                <div class="col-sm-8">
                                    <input type="file" id="file_pack" name="file" accept="image/png, image/jpeg"
                                           style="display: inline-block;">
                                    <button type="button" class="btn btn-primary " id="upload">
                                        上传
                                    </button>
                                    <div id="loading" style="display:none"><img src="/site/images/wait.gif" alt=""/>正在上传,请稍候...
                                    </div>
                                    <p class="help-block">请上传相关图片,封面图尽量选择 900*500 像素;支持图片格式jpg.png.</p>
                                    <img id="cover"
                                         th:src="${productArticle.articlecoverurlhidden==null?'':productArticle.articlecoverurlhidden}"
                                         th:if="${productArticle.articlecoverurlhidden==null}"/>
                                    <img id="cover"
                                         th:src="${productArticle.articlecoverurlhidden==null?'':productArticle.articlecoverurlhidden}"
                                         th:if="${productArticle.articlecoverurlhidden!=null&&productArticle.articlecoverurlhidden!=''}"
                                         width="200" height="200"/>
                                </div>
                            </form>
                        </div>
                        <div class="form-group">
                            <script id="editor" type="text/plain"></script>
                            <input type="hidden" name="articlecontent" id="articlecontent"
                                   th:value="${productArticle.articlecontenthidden}"/>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button type="button" onclick="update(0);" class="btn btn-info">草稿</button>
                                <button type="button" onclick="update(1);" class="btn btn-primary">发布</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript" src="/js/appjs/market/productArticle/edit.js">
</script>
<link rel="stylesheet" href="@{/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css}"
      th:href="@{/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css}">
<script th:src="@{/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js}"></script>
<script th:src="@{/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.all.min.js}"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>


<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/

    /*]]>*/
    /**
     * 日期选择器
     * @param
     */
    $("#articlehistorydate").datetimepicker({//选择年月日
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,//显示‘今日’按钮
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。
        clearBtn: true,//清除按钮
        forceParse: 0
    });
    $(function () {
        getDistrict();
        var tagidhidden = $('#tagidhidden').val();
        $('#tagid').val(tagidhidden);
        var ue = UE.getEditor('editor');
        var html = $("#articlecontent").val();
        ue.ready(function () {
            ue.setContent(html);
        });

        //上传封面图片
        $("#loading").hide();
        $("#upload").click(function () {
            var oFile = $("#file_pack").val();
            if (oFile == null || "" == oFile) {
                alert("没有文件！请选择或退出");
                return;
            }
            var file = document.querySelector('[type=file]');
            // 通过FormData将文件转成二进制数据
            var formData = new FormData();
            // 将文件转二进制
            formData.append('file', file.files[0]);
            // var bbb = $("#updform:first").serialize()
            // var aaa = new FormData($("#file")[0]);
            // var form = new FormData(document.getElementById("updform"));
            $("#loading").show();
            $.ajax({
                type: "POST",
                url: "/market/productArticle/uploadFile",
                data: formData,// 你的formid
                async: false,
                processData: false,
                contentType: false,
                error: function (request) {
                    parent.layer.alert("Connection error");
                },
                success: function (result) {
                    if (result != null) {
                        $("#loading").hide();
                        var name = result.split("#")[0];
                        var fileSuffix = name.substring(name.lastIndexOf(".") + 1).toLowerCase();
                        if (fileSuffix !== "png" && fileSuffix !== "jpg") {
                            layer.alert("上传图片格式不正确，请重新上传")
                            return;
                        }
                        var url = result.split("#")[1];
                        var realurl = result.split("#")[2];
                        $("#articlecoverurl").val(url);
                        $("#fileName").val(name);
                        $("#cover").attr("src", realurl);
                        $("#cover").attr("width", 200);
                        $("#cover").attr("height", 200);
                        layer.msg("上传成功");
                        $("#file").val('');
                    } else {
                        layer.msg("上传失败，请联系管理员！");
                    }
                }
            });
        });
    })

    function getDistrict() {
        $("#tagid").empty();    //清空二级下拉框，否则会叠加
        // $("#sdkid").append("<option value='' selected='selected'>" + "---请选择---" + "</option>");
        /* var id = obj.id;
         var options = $("#" + id + " option:selected"); //获取选中的项
         alert(options.text()); //拿到选中项的值
         var countrycode = options.val();*/
        var productid = $("#productid").val();
        $.ajax({
            type: "post",
            url: '/market/productArticle/tagListByProductid',
            dataType: 'json',
            async: false,
            data: {productid: productid},
            success: function (data) {
                var select = $("#tagid");
                for (var i = 0; i < data.length; i++) {
                    select.append("<option value='" + data[i].id + "'>"
                        + data[i].tagName + "</option>");
                }
            }
        });
    }
</script>
</body>
</html>
